<template>
  <div>
    <!-- 用户数、订单数、商品数的卡片 -->
    <el-row gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <!-- 卡片标题和查看按钮 -->
          <div slot="header" class="clearfix">
            <span>用户数</span>
            <el-button type="text" class="float-right" @click="navigateTo('users')">查看用户</el-button>
          </div>
          <!-- 显示用户数 -->
          <div>{{ userCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <!-- 卡片标题和查看按钮 -->
          <div slot="header" class="clearfix">
            <span>订单数</span>
            <el-button type="text" class="float-right" @click="navigateTo('orders')">查看订单</el-button>
          </div>
          <!-- 显示订单数 -->
          <div>{{ orderCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <!-- 卡片标题和查看按钮 -->
          <div slot="header" class="clearfix">
            <span>商品数</span>
            <el-button type="text" class="float-right" @click="navigateTo('products')">查看商品</el-button>
          </div>
          <!-- 显示商品数 -->
          <div>{{ productCount }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 统计选择下拉框和图表 -->
    <el-row gutter="20" style="margin: 0 auto;text-align: center;margin-top: 20px;width: 530px;">
      <el-col :span="24">
        <el-card shadow="hover">
          <!-- 下拉框和标题 -->
          <div slot="header" class="clearfix">
            <span>统计选择</span>
            <el-select v-model="selectedOption" placeholder="请选择统计项" @change="handleSelectChange">
              <!-- 下拉选项 -->
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 图表容器 -->
          <div id="chart" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'; // 引入 echarts 库

export default {
  data() {
    return {
      selectedOption: '', // 下拉框选中的值
      options: [ // 下拉框选项
        { label: '用户统计', value: 'users' },
        { label: '订单统计', value: 'orders' },
        { label: '商品统计', value: 'products' }
      ],
      chartData: [] // 图表数据
    };
  },
  computed: {
    userCount() {
      return this.$store.state.users.length; // 计算用户数
    },
    orderCount() {
      return this.$store.state.orders.length; // 计算订单数
    },
    productCount() {
      return this.$store.state.products.length; // 计算商品数
    }
  },
  watch: {
    selectedOption: {
      immediate: true,
      handler() {
        this.updateChart(); // 监听下拉框选项变化，更新图表
      }
    }
  },
  methods: {
    handleSelect(key) {
    // 获取当前路由路径
    const currentRoute = this.$router.currentRoute.path;
    // 如果要导航的路由与当前路由不同，才执行导航操作
    if (currentRoute !== `/${key}`) {
      this.$router.push({ name: key });
    }
  },
    navigateTo(routeName) {
      this.$router.push({ name: routeName }); // 导航到指定路由
    },
    initChart() {
      const chart = echarts.init(document.getElementById('chart')); // 初始化图表
      const option = {
        title: { text: '' },
        tooltip: {},
        xAxis: { data: [] },
        yAxis: {},
        series: [{ name: '', type: 'bar', data: [] }]
      };
      chart.setOption(option); // 设置图表选项
      return chart;
    },
    updateChart() {
      const chart = this.initChart(); // 初始化图表
      const data = this.getDataForSelectedOption(); // 获取选中项的数据
      const option = {
        title: { text: this.selectedOption === 'users' ? '用户统计' : (this.selectedOption === 'orders' ? '订单统计' : '商品统计') },
        xAxis: { data: data.map(item => this.selectedOption === 'users' ? item.username : (this.selectedOption === 'orders' ? item.customerName : item.name)) },
        series: [{ name: this.selectedOption === 'users' ? '用户数' : (this.selectedOption === 'orders' ? '订单数' : '商品数'), data: data.map(item => this.selectedOption === 'users' ? 1 : (this.selectedOption === 'orders' ? item.totalAmount : item.price)) }]
      };
      chart.setOption(option); // 设置图表选项
    },
    getDataForSelectedOption() {
      switch (this.selectedOption) {
        case 'users':
          return this.$store.state.users; // 返回用户数据
        case 'orders':
          return this.$store.state.orders; // 返回订单数据
        case 'products':
          return this.$store.state.products; // 返回商品数据
        default:
          return [];
      }
    },
    handleSelectChange() {
      this.updateChart(); // 处理下拉框选项变化，更新图表
    }
  }
};
</script>

<style scoped>
.el-card {
  text-align: center; /* 居中文本 */
  color: #333; /* 文本颜色 */
  background-color: rgba(255, 255, 255, 0.6)!important; /* 半透明背景颜色 */
}

.float-right {
  float: right; /* 右浮动 */
}
</style>
